<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/hs.css">
    <link rel="stylesheet" href="./css/footer.css">
    <link rel="stylesheet" href="./css/navbar.css">
    <title>登录界面</title>
    <style>
      /* body有一个8像素的外边距，影响布局，因此要在最开始去掉  */
      body {margin: 0;}
      .bg {
        width: 100%;
        height: 600px;
        min-width: 1000px;
        background: url(./moban5554/images/banner/4.jpg) no-repeat; 
        background-size: cover;
      }
      /* 设计居中区域，只要内容放在居中区域里 */
      .center {
        width: 2000px;
        margin: auto;
        /* background-color: rgba(255,0,0,0.00001);  */
        overflow: hidden; 
      }
      table {
        margin-left: 680px;
        margin-top: 130px;
        /* 去除table里td之间的缝隙，用来保证td的下边框线中间没有空隙*/
        border-collapse: collapse;    
        background-color: rgba(0,0,0,0.3);
      }
      table td {
        /* 110*2总体table的宽度 */
        width: 110px;
        height: 40px;  
        /* 所有文字都白色 */
        color: white;
      }
      table td a {
        color: white;
        text-decoration: none;
        font-size: 12px;
      }
      .reg {text-align: right;}
      .tit,.reg {border-bottom: 1px solid white;}
      table .yhm input,.mm input {
        width: 98%; 
        border:0;
        outline: none;
        height: 28px;
        background-repeat: no-repeat;
        background-position: right center;
      } 
      .yhm>input {background-image: url(./img/yhm.png);}
      .mm>input {background-image: url(./img/mm.png); }
       .dl {font-size: 12px;  }
       /* 调整复选框和旁边文字的垂直位置*/
       .d1 input {vertical-align: middle;}
       .wj {text-align: right;line-height: 40px;}
         .btn{
         margin-top: -20px;
         margin-left: 50px;
       }
       .btn button {
         width: 100%;
         height: 32px;
         background-color: #0aa1ed;
         color: white;
         border: 0;
         border-radius: 3px;
         cursor: pointer;
         margin-top: -40px;
         margin-left: 30px; 
       }
     
    </style>
</head>
<body>
  <div class="hs-navbar bg-white">
    <div class="container ">
       <div class="navbar navbar-expand-lg bg-white navbar-light">
         <!-- logo -->
         <a href=""><img src="./moban5554/images/logo-dark.png" alt="" class="w-25"></a>   
           <!-- 右侧菜单组 -->
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
             <ul class="navbar-nav ml-auto py-4 py-md-0">
                <li class="nav-item active"><a class="nav-link" href="1.html">HOME</a></li>
                <li class="nav-item"><a class="nav-link" href="#">ABOUT</a></li>
                <li class="nav-item"><a class="nav-link" href="3.html">SERVICES</a></li>
                <li class="nav-item"><a class="nav-link" href="#">PORTFOLIO</a></li>
                <li class="nav-item"><a class="nav-link" href="2.html">CONTACT</a></li>
                <li class="nav-item"><a class="nav-link" href="#">BLOG</a></li>
             </ul>
           </button>
          </div>
       </div>      
    </div>
 </div>  
<div class="bg">
 <div class="center">
  <table>
    <tr>
     <td class="tit">登录</td>
     <td class="reg"><a href="#">新用户注册</a></td>
    </tr>
    <tr>
      <td colspan="2" class="yhm"><input type="text" placeholder="请输入用户名"></td> 
    </tr>
    <tr>
      <td colspan="2" class="mm"><input type="text" placeholder="请输入密码"></td> 
    </tr>
    <tr>
      <td class="dl"><input type="checkbox" id="zd"><label for="zd">自动登录</label></td>  
      <td class="wj"><a href="#">忘记密码？</a></td> 
    </tr>
    <tr>
      <td colspan="2" class="btn"><button>登录</button></td>  
    </tr>
   </table>
 </div>
</div> 
<div class="hs-footer">
  <!--页尾的上半部分  -->
  <div class="hs-ft">
    <div class="container">
      <div class="row">
        <div class="col-lg-2 col-sm-4 col-6 text-center pt-4 pb-3">
          <img src="./moban5554/images/clients/1.jpg" alt="" class="w-100">
        </div> 
        <div class="col-lg-2 col-sm-4 col-6 text-center pt-4 pb-3">
          <img src="./moban5554/images/clients/2.jpg" alt="" class="w-100">
        </div> 
        <div class="col-lg-2 col-sm-4 col-6 text-center pt-4 pb-3">
          <img src="./moban5554/images/clients/3.jpg" alt="" class="w-100">
        </div> 
        <div class="col-lg-2 col-sm-4 col-6 text-center pt-4 pb-3">
          <img src="./moban5554/images/clients/4.jpg" alt="" class="w-100">
        </div>
        <div class="col-lg-2 col-sm-4 col-6  text-center pt-4 pb-3">
          <img src="./moban5554/images/clients/5.jpg" alt="" class="w-100">
        </div>
        <div class="col-lg-2 col-sm-4 col-6 text-center pt-4 pb-3">
          <img src="./moban5554/images/clients/6.jpg" alt="" class="w-100">
        </div>  
      </div>  
    </div>  
  </div>
  <!-- 页尾的下半部分 -->
  <div class="hs-fb bg-warning pt-5 pb-5">
    <div class="container">
      <div class="row">
        <div class="col-lg-4 col-md-12">
         <h2>Bethany</h2> 
         <p>We believe that it is all about the BIG DREAMS and the small details!</p> 
          <img src="./img/footer/footerFont.png" alt="">
        </div>  
        <div class="col-lg-4 col-md-12">
          <div class="d-flex justify-content-around"> 
          <ul class="list-unstyled text-center">
           <li>Useful·Links</li>
           <li><a href="#">About</a></li>
           <li><a href="#">Services</a></li>
           <li><a href="#">Protfolio</a></li> 
           <li><a href="#">F.A.Qs</a></li>  
          </ul>
          <ul  class="list-unstyled text-center">
            <li>Get.in.touch</li>
            <hr>
            <li>+1.123.444.0000</li>
            <li>info@bethany.com</li>  
          </ul>  
          <ul  class="list-unstyled text-center">
            <li>Location</li>
            <hr>
            <li>Broadway5StNormainNewYork</li>
            <li>98499,USA</li>  
            <li>
              <img src="./img/footer/wechat.png" alt="">
              <img src="./img/footer/sinablog.png" alt="">
            </li>
          </ul>
        </div> 
        </div> 
      </div>
    </div> 
  </div>
  <div class="row">
    <div class="col-12 text-center bg-warning ">
      Copyright © 2021.Company name All rights reserved.
    </div>  
  </div>
</div>
</body>
</html>